<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="./lib/three.js"></script>
		<script src="./js/OrbitControls.js"></script>

		<style>
			body {
				margin: 0;
			}

			canvas {
				width: 100%;
				height: 100%;
				display: block;
			}
		</style>
	</head>
	<body>
		<script>
			//渲染器
			var renderer;

			function initRender() {
				width = window.innerWidth;
				height = window.innerHeight;
				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				//设置canvas尺寸
				renderer.setSize(width, height);
				//设置背景
				renderer.setClearColor(0x000000, 1.0);
				//设置设备像素比
				renderer.setPixelRatio(window.devicePixelRatio);
				//添加到dom
				document.body.appendChild(renderer.domElement);
			}

			//相机
			var camera;

			function initCamera() {
				// camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 5000);
				camera = new THREE.OrthographicCamera(-window.innerWidth/2, window.innerWidth/2, window.innerHeight/2, -window.innerHeight/2, 1, 10000);

				camera.position.set(1000, 1000, 1000);
				camera.lookAt(new THREE.Vector3(0, 0, 0));
			}

			//场景
			var scene;

			function initScene() {
				scene = new THREE.Scene();
			}

			//光源
			var light;

			function initLight() {
				//添加环境光
				scene.add(new THREE.AmbientLight(0x404040));

				//添加平衡光
				light = new THREE.DirectionalLight(0xffffff);
				light.position.set(0, 1, 0);
				scene.add(light);
			}

			//模型
			function initModel() {
				//通过加载图片生成一个纹理
				var map = new THREE.TextureLoader().load("./img/sun.jpg");
				//定义纹理在水平和垂直方向简单的重复到无穷大。
				map.wrapS = map.wrapT = THREE.RepeatWrapping;
				//定义纹理的各向异性
				map.anisotropy = 16;

				//定义兰伯特网孔材质
				var material = new THREE.MeshLambertMaterial({
					map: map,
					side: THREE.DoubleSide
				});

				//球形网格 （半径长度，水平块的密度，垂直块的密度）
				object = new THREE.Mesh(new THREE.SphereGeometry(75, 20, 10), material);
				object.position.set(-400, 0, 200);
				scene.add(object);

				//二十面体 （图形大小半径，大于零将不是二十面体，越大越圆滑）
				object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 0), material);
				object.position.set(-200, 0, 200);
				scene.add(object);

				//八面体（图形大小半径，大于零将不是八面体，越大越圆滑）
				object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 0), material);
				object.position.set(0, 0, 200);
				scene.add(object);

				//四面体（图形大小半径，大于零将不是四面体，越大越圆滑）
				object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material);
				object.position.set(200, 0, 200);
				scene.add(object);

				//长方形平面 （x轴宽度，y轴高度，x方向分段数，y方向分段数）
				object = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 1, 1), material);
				object.position.set(-400, 0, 0);
				scene.add(object);

				//立方体 （x轴宽度，y轴高度，z轴深度，沿宽面分段数，沿高度面分段数，沿深度面分段数）
				object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 1, 1, 1), material);
				object.position.set(-200, 0, 0);
				scene.add(object);

				//圆形平面 （半径，顶点密度，绘制起点弧度，绘制弧度）
				object = new THREE.Mesh(new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), material);
				object.position.set(0, 0, 0);
				scene.add(object);

				//空心圆平面 （内圆半径，外圆半径，分割面越大越圆滑，垂直外边分割面，开始绘制弧度，绘制弧度）
				object = new THREE.Mesh(new THREE.RingGeometry(10, 50, 10, 5, 0, Math.PI * 2), material);
				object.position.set(200, 0, 0);
				scene.add(object);

				//圆柱体 （头部圆的半径，底部圆半径，高度，上下圆顶点个数，上下面切割线条数，上下面是否显示，开始弧度，绘制弧度）
				object = new THREE.Mesh(new THREE.CylinderGeometry(25, 75, 100, 40, 5), material);
				object.position.set(400, 0, 0);
				scene.add(object);

				//车床模型
				var points = [];

				for (var i = 0; i < 50; i++) {

					points.push(new THREE.Vector2(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, (i - 5) * 2));

				}

				//（一个vector2的数组分别代表xy轴，生成圆周段的数目，开始弧度，绘制弧度）
				object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material);
				object.position.set(-400, 0, -200);
				scene.add(object);

				//救生圈 （救生圈半径，管道直径，基于管道横切顶点数，救生圈横切顶点个数）
				object = new THREE.Mesh(new THREE.TorusGeometry(50, 20, 20, 20), material);
				object.position.set(-200, 0, -200);
				scene.add(object);

				//环面扭结模型 （图形半径，管道直径，基于管道横切定点数，根据图形半径横切顶点数，绕旋转对称轴的圈数，绕环面的圆的圈数）
				object = new THREE.Mesh(new THREE.TorusKnotGeometry(50, 10, 50, 20), material);
				object.position.set(0, 0, -200);
				scene.add(object);

				//轴辅助 （每一个轴的长度）
				object = new THREE.AxesHelper(50);
				object.position.set(200, 0, -200);
				scene.add(object);

				//箭头辅助（箭头头的方向必须是vecteor3，箭头起点必须是vector3，箭头长度，颜色）
				object = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 50, 0x00ffff);
				object.position.set(400, 0, -200);
				scene.add(object);


			}

			function animate() {

				requestAnimationFrame(animate);
				render();
				controls.update();

			}

			function render() {
				renderer.render(scene, camera);
			}

			//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
			var controls;

			function initControls() {
				controls = new THREE.OrbitControls(camera, renderer.domElement);

				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;

				//动态阻尼系数 就是鼠标拖拽旋转灵敏度
				controls.dampingFactor = 0.95;

				//是否可以缩放
				controls.enableZoom = true;

				//是否自动旋转

				controls.autoRotate = true;

				//设置相机距离原点的最远距离
				controls.minDistance = 50;

				//设置相机距离原点的最远距离
				controls.maxDistance = 1000;

				//是否开启右键拖拽
				controls.enablePan = false;

			}

			//窗口变动触发的函数
			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);

			}

			//绘制
			function draw() {
				initRender();
				initCamera();
				initScene();
				initLight();
				initModel();
				initControls();

				animate();

				window.addEventListener('resize', onWindowResize, false);
			}

			draw();
		</script>
	</body>
</html>
